<template>
  <div class="box8">
    <div class="title">
      <p>数据统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

//获取节点
let charts = ref()

let option = {
  //布局组件
  grid: {
    left: 30,
    right: 20,
    top: 40,
    bottom: 20
  },
  title: {
    text: '游客消费数据',
    top: 20,
    left: 10,
    textStyle: {
      color: 'yellow',
      fontSize: 14
    }
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 20,
    data: ['好感度', '消费指数'],
    textStyle: {
      color: 'white'
    }
  },

  radar: {
    // shape: 'circle',
    indicator: [
      { name: '美食', max: 6500 },
      { name: '出行', max: 16000 },
      { name: '景点', max: 30000 },
      { name: '住宿', max: 38000 },
      { name: '娱乐', max: 52000 },
      { name: '商场', max: 25000 }
    ]
  },
  series: [
    {
      name: '好感度 vs 消费指数',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '好感度'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '消费指数'
        }
      ]
    }
  ]
}

onMounted(() => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)

  //设置实例的配置项
  mycharts.setOption(option)
})
</script>

<style lang="scss" scoped>
.box8 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;

  .title {
    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 50px);
  }
}
</style>
